변수 관리 useRef과 let 차이

❓질문

리액트에서 변수 관리 시 useRef를 사용하는 것은 let을 사용하는 것과 어떤 차이가 있나요?

💡 조사하기전 내가 알고 있던 내용

useRef와 let으로 변수를 관리할 때 가장 큰 차이는 리렌더링후 값이 남아있는지 없는지로 나눌 수 있을 것 같습니다.

useRef로 관리하는 값은 리렌더링 후에도 값이 남아 있습니다 반대로 let으로 관리하고있는 변수는 리렌더링씨 값을 잃어버립니다.

보통 useRef는 DOM요소에 접근할 때 사용합니다 input 요소에 focus를 준다던가 스크롤 위치를 기억하고있는등으로 사용합니다.

🏫 정리한 내용

별도로 컴포넌트 외부에서 let을 선언하면 리렌더링에 영향을 안받을텐데 이런식으로 작성하는 방법에 대해서는 비권장하는 바가 있습니다.

첫째, 컴포넌트 외부의 변수는 모든 컴포넌트 인스턴스가 공유하게 됩니다.
둘째, 전역 변수처럼 동작하기 때문에 코드의 에측 가능성과 유지보수성이 떨어집니다.
셋째, 리액트의 원칙 중 하나인 단방향 데이터 흐름에 위배됩니다.

따라서 컴포넌트의 상태를 관리할 때는 useState()나 useRef()와 같은 리액트에서 제공하는 공식적인 방법을 사용하는 것이 좋습니다.